<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">忘记密码</block>
		</cu-custom>
		<view class="padding-sm">
			<form @submit="submit">
				<view class="cu-form-group border-top-radius">
					<input placeholder="请输入手机号码" name="phone" @input="changePhone"></input>
				</view>
				<view class="cu-form-group">
					<input placeholder="请输入验证码" name="code"></input>
					<button class='cu-btn bg-pick radius-100 color-100 shadow' style="min-width:100px;" @click="sendCode" :disabled="count>0">
						{{count > 0 ? count + ' s' : '发送验证码'}}
					</button>
				</view>
				<view class="cu-form-group">
					<input placeholder="请输新密码" name="newPassword"></input>
				</view>
				<view class="cu-form-group">
					<input placeholder="请输入身份证号码" name="idcard"></input>
				</view>
				
				<view class="cu-form-group border-bottom-radius">
					<input placeholder="请输入姓名" name="realname"></input>
				</view>
				
				<view class="padding flex flex-direction" style="padding-top: 127px; padding-left: 60px; padding-right: 60px;">
					<button class="cu-btn bg-btn-pick color-100 margin-tb-sm lg round" form-type="submit">确认</button>
				</view>
				
			</form>
			
		</view>
	</view>
</template>

<script>
	import UserService from '../../service/user.js';
	export default {
		data() {
			return {
				count: '',
				timer: null,
				phone:''
			}
		},
		methods:{
			changePhone(e){
				this.phone = e.detail.value;
			},
			// 发送验证码
			async sendCode () {
				const TIME_COUNT = 60;
				if(!this.phone){
					return this.$api.msg("请输入手机号")
				}
				const params = {
					type: 1,
					phone:this.phone
				}
				if (!this.timer) {
					const code = await UserService.getCode(params)
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				   }, 1000)
				  }
			},
			
			
			async submit(e) {
				const data = e.detail.value
				if(!data.phone){
					return this.$api.msg("手机号码必填")
				}
				if(!data.code){
					return this.$api.msg("验证码必填")
				}
				if(!data.newPassword){
					return this.$api.msg("新密码必填")
				}
				if(!data.idcard){
					return this.$api.msg("身份证号必填")
				}
				if(!data.realname){
					return this.$api.msg("姓名必填")
				}
			
				const res = await UserService.forgetLoginPasswordService(data)
				this.$api.msg("修改成功")
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped lang="scss">

	.bg-btn-pick {
		background: linear-gradient(270deg, #C529DA 0%, #FA81CE 100%);
	}
	.bg-pick {
		background-color: #E428FD;
	}
	.color-pink {
		color: #E428FD;
	}
	.radius-100{
		border-radius: 16px;
		
	}
	.color-100{
		color: #FFFFFF;
	}
	.border-bottom-radius {
		border-radius: 0px 0px 10px 10px;
		
	}
	.border-top-radius {
		border-radius: 10px 10px 0 0;
		
	}
</style>
